<template>
  <div class="view-echarts">
    <n-card>
      <n-h2 prefix="bar">
        <n-text type="primary"> echarts组件示例 </n-text>
      </n-h2>
      <n-space>
        <n-button
          @click="config.openDarkTheme = !config.openDarkTheme"
          :type="config.openDarkTheme ? 'success' : 'default'"
          >适应黑暗模式</n-button
        >
        <n-button
          @click="config.loading = !config.loading"
          :type="config.loading ? 'success' : 'default'"
        >
          加载
        </n-button>
        <n-button
          @click="config.resizeDuration = 100"
          :type="config.resizeDuration === 100 ? 'success' : 'default'"
        >
          动画延迟时间: 100s
        </n-button>
        <n-button
          @click="config.resizeDuration = 300"
          :type="config.resizeDuration === 300 ? 'success' : 'default'"
        >
          动画延迟时间: 300s（默认）
        </n-button>
        <n-button
          @click="config.resizeDuration = 500"
          :type="config.resizeDuration === 500 ? 'success' : 'default'"
        >
          动画延迟时间: 500s
        </n-button>
        <n-button
          @click="config.height = '100%'"
          :type="config.height === '100%' ? 'success' : 'default'"
        >
          默认高度: 100%
        </n-button>
      </n-space>
    </n-card>
    <div class="echarts-grid">
      <n-grid x-gap="12" :cols="2" :y-gap="8">
        <n-gi v-for="echart in echartList" :key="echart.id">
          <n-card
            :title="echart.name"
            :segmented="{
              content: true,
              footer: 'soft'
            }"
            :content-style="{
              padding: '10px'
            }"
          >
            <div class="echart-box">
              <pro-echarts :options="echart" v-bind="config" />
            </div>
          </n-card>
        </n-gi>
      </n-grid>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { lineOptions, barOptions, pieOptions, datasetOptions } from './options'
const echartList = [lineOptions, barOptions, pieOptions, datasetOptions]
const config = reactive({
  openDarkTheme: true,
  loading: true,
  resizeDuration: 300,
  height: '100%'
})

setTimeout(() => {
  config.loading = false
}, 1000)
</script>
<style lang="less" scoped>
.view-echarts,
.echarts-grid {
  padding: 20px 0;
}
.echart-box {
  height: 300px;
}
</style>
